<template>
  <div class="report-export-page">
    <el-card class="export-card">
      <div class="export-header">
        <span class="export-title">报表导出与分享</span>
      </div>

      <div class="export-body">
        <!-- 分享码与二维码展示 -->
        <el-row class="share-section" :gutter="20">
          <el-col :span="12">
            <el-input
              v-model="shareLink"
              label="分享链接"
              placeholder="复制此链接进行分享"
              readonly
            />
          </el-col>
          <el-col :span="12">
            <div class="qr-code">
              <qrcode-vue :value="shareLink" :size="128" />
            </div>
          </el-col>
        </el-row>

        <div class="export-options">
          <!-- 导出选项 -->
          <el-button @click="exportExcel" type="primary">导出为 Excel</el-button>
          <el-button @click="exportImg" type="success">导出为图片</el-button>
        </div>

        <el-divider />

        <!-- 生成分享码按钮 -->
        <el-button type="primary" @click="generateShareLink" style="width:100%">
          生成分享链接
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import * as XLSX from 'xlsx'
import html2canvas from 'html2canvas'
import QrcodeVue from 'qrcode.vue'

const router = useRouter()
const route = useRoute()

// 当前报表数据（模拟）
const reportData = ref({
  name: '销售报表',
  fields: ['日期', '销售额', '数量', '产品'],
  data: [
    { 日期: '2024-07-01', 销售额: 2000, 数量: 500, 产品: 'A产品' },
    { 日期: '2024-07-02', 销售额: 3000, 数量: 600, 产品: 'B产品' },
    { 日期: '2024-07-03', 销售额: 2500, 数量: 550, 产品: 'C产品' },
  ]
})

// 分享链接
const shareLink = ref('')

// 生成分享链接
function generateShareLink() {
  // 这里生成分享链接，实际可以根据报表ID或其他方式生成唯一链接
  shareLink.value = `${window.location.origin}/report/share/${route.params.id}`
}

// 导出为Excel
function exportExcel() {
  const ws = XLSX.utils.json_to_sheet(reportData.value.data)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '报表数据')
  XLSX.writeFile(wb, `${reportData.value.name}.xlsx`)
  ElMessage.success('报表已导出为Excel！')
}

// 导出为图片
async function exportImg() {
  const canvas = await html2canvas(document.querySelector('.el-card'), { useCORS: true })
  const link = document.createElement('a')
  link.href = canvas.toDataURL('image/png')
  link.download = `${reportData.value.name}.png`
  link.click()
  ElMessage.success('报表已导出为图片！')
}

</script>



<style scoped>
.report-export-page {
  padding: 24px;
  background: #f7f8fa;
}

.export-card {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 12px;
}

.export-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.export-title {
  font-size: 20px;
  font-weight: 600;
}

.export-options {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.qr-code {
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-section {
  margin-bottom: 20px;
}
</style>
